<template>
	<div class="imgs" :data-layout="layout">
		<img v-if="layout == 1" :src="data[0]" alt="">
		<div v-if="layout == 2" class="imgs-2">
			<div class="img">
				<div class="img-box">
					<img :src="data[0]" alt="">
				</div>
			</div>
			<div class="img">
				<div class="img-box">
					<img :src="data[1] || data[0]" alt="">
				</div>
			</div>
		</div>
		<div v-if="layout == 3" class="imgs-3">
			<div class="imgs-3-top">
				<div class="img">
					<div class="img-box">
						<img :src="data[0]" alt="">
					</div>
				</div>
			</div>
			<div class="imgs-3-bottom u-flex">
				<div class="img">
					<div class="img-box">
						<img :src="data[1] || data[0]" alt="">
					</div>
				</div>
				<div class="img">
					<div class="img-box">
						<img :src="data[2] || data[0]" alt="">
					</div>
				</div>
			</div>
		</div>
		<div v-if="layout == 4" class="imgs-4 u-flex-col">
			<div class="imgs-4-box u-flex u-flex-1">
				<div class="img u-flex-1">
					<div class="img-box">
						<img :src="data[0]" alt="">
					</div>
				</div>
				<div class="img u-flex-1">
					<div class="img-box">
						<img :src="data[1] || data[0]" alt="">
					</div>
				</div>
			</div>
			<div class="imgs-4-box u-flex u-flex-1">
				<div class="img u-flex-1">
					<div class="img-box">
						<img :src="data[2] || data[0]" alt="">
					</div>
				</div>
				<div class="img u-flex-1">
					<div class="img-box">
						<img :src="data[3] || data[0]" alt="">
					</div>
				</div>
			</div>
		</div>
		<div v-if="layout == 5" class="imgs-5 u-flex">
			<div class="imgs-5-box u-flex-col u-flex-1">
				<div class="img u-flex-1">
					<div class="img-box">
						<img :src="data[0]" alt="">
					</div>
				</div>
				<div class="img u-flex-1">
					<div class="img-box">
						<img :src="data[1] || data[0]" alt="">
					</div>
				</div>
			</div>
			<div class="imgs-5-box u-flex-col u-flex-1">
				<div class="img u-flex-1">
					<div class="img-box">
						<img :src="data[2] || data[0]" alt="">
					</div>
				</div>
				<div class="img u-flex-1">
					<div class="img-box">
						<img :src="data[3] || data[0]" alt="">
					</div>
				</div>
				<div class="img u-flex-1">
					<div class="img-box">
						<img :src="data[4] || data[0]" alt="">
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
module.exports = {
	name: 'Imgs',
	props: {
		layout: {
			type: Number,
			default: 1
		},
		data: {
			type: Array,
			default: () => {
				return []
			}
		}
	},
	data() {
		return {
			
		}
	},
	methods: {
		
	},
	mounted() {
		
	}
}
</script>

<style>
	.imgs {
		position: relative;
		width: 100%;
		padding-bottom: 100%;
		overflow: hidden;
	}
	
	.imgs[data-layout="1"] img,
	.imgs-2,
	.imgs-3,
	.imgs-4,
	.imgs-5 {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}
	
	.imgs-2 .img {
		height: 50%;
	}
	
	.imgs-3-top {
		height: 50%;
	}
	
	.imgs-3-top .img {
		width: 100%;
		height: 100%;
	}
	
	.imgs-3-bottom {
		position: relative;
		height: 50%;
	}
	
	.imgs-3-bottom .img {
		flex: 0 0 50%;
		width: 0;
		height: 100%;
	}
	
	.imgs-4-box .img {
		height: 100%;
	}
	
	.imgs-5-box {
		height: 100%;
	}
	
	.img {
		position: relative;
		overflow: hidden;
	}
	
	.img-box {
		position: absolute;
		left: 0;
		top: 50%;
		width: 100%;
		padding-bottom: 100%;
		font-size: 0;
		line-height: 0;
		transform: translateY(-50%);
	}
	
	.img-box img {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}
</style>